<template>
    <div class="send">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item prop="name1">
                <template slot="label">
                    <span class="label">标题：</span>
                </template>
                <el-input v-model="ruleForm.name1"></el-input>
            </el-form-item>
            <el-form-item prop="content1">
                <template slot="label">
                    <span class="label">内容：</span>
                </template>
                <el-input class="content" type="textarea" v-model="ruleForm.content1"></el-input>
            </el-form-item>
            <el-form-item  prop="recipient">
                <template slot="label">
                    <span class="label">接收人：</span>
                </template>
                <el-select
    v-model="ruleForm.recipient"
    class="recipient"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :loading="loading">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm" :plain="true">发送</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    export default {
        name:"send",
        data() {
            return {
                ruleForm: {
                    name1: '',
                    content1: '',
                    recipient:[],
                },
                options: [],
                list: [],
                loading: false,
                states: [],
                rules: {
                    name1: [
                        { required: true, message: '请输入标题', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    content1: [
                        { required: true, message: '请输入内容', trigger: 'change' }
                    ]
                },
            };
        },
        mounted() {
            
        },
        methods: {
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                        this.axios({
                            url:"/api/admin/user/page/list",
                            method:"post",
                            data:{
                                "userName": "",  //用户名
                                "role": 1,   //角色
                                "pageIndex": 1,  //页码
                                "pageSize": 100   //每页条数
                            }
                        }).then(res=>{
                            if(res.data.code=1){
                                let arr = []
                                res.data.response.list.forEach(item=>{
                                    arr.push({userName:item.userName,id:item.id});
                                })
                                this.states = arr;
                                this.list = this.states.map(item => {
                                    return { value: `${item.userName}`, label: `${item.userName}` };
                                });
                                this.options = this.list.filter(item => {
                                    return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1; 
                                });
                            }
                        })
                    }, 200);
                } else {
                    this.options = [];
                }
            },
            submitForm() {
                let arr1 = []
                this.ruleForm.recipient.forEach((item1,index)=>{
                    let arr = this.states.filter(item=>{
                        return item.userName == this.ruleForm.recipient[index]
                    })
                    arr1.push(arr[0].id);
                })
                let obj = {
                    "title": this.ruleForm.name1,  //消息标题
                    "content":this.ruleForm.content1,  //消息内容
                    "receiveUserIds":arr1  //接收人
                }
                this.axios({
                    url:"/api/admin/message/send",
                    method:"post",
                    data:obj
                }).then(res=>{
                    console.log(res);
                    if(res.data.code == 1){
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        this.$router.push("/message/list")
                    }else{
                        this.$message({
                            message: '警告哦，这是一条警告消息',
                            type: 'warning'
                        });
                    }
                })
            },
            resetForm() {
                this.ruleForm.name1 = ""
                this.ruleForm.content1 = ""
                this.ruleForm.recipient = ""
            }
        }
    }
</script>
<style lang="scss" scoped>
    ::v-deep .content .el-textarea__inner{
        height:300px;
    }
    ::v-deep .recipient{
        width:250px;
    }
    .send{
        padding:6px 20px 20px 20px;
    }
    .label{
        font-weight:700;
    }
</style>
>>>>>>> yangtao
